<template>
  <div class="list">
    <pannle title="商品列表">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="商品名称">
                <span>{{ props.row.name }}</span>
              </el-form-item>
              <el-form-item label="所属分类">
                <span>{{ props.row.category }}</span>
              </el-form-item>
              <el-form-item label="商品价格">
                <span>{{ props.row.price }}</span>
              </el-form-item>
              <el-form-item label="商品图片">
                <span>{{ props.row.imgUrl }}</span>
              </el-form-item>
              <el-form-item label="商品描述">
                <span>{{ props.row.goodsDesc }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="name"> </el-table-column>
        <el-table-column label="所属分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="price"> </el-table-column>
        <el-table-column label="商品图片" prop="imgUrl"> </el-table-column>
        <el-table-column label="商品描述" prop="goodsDesc"> </el-table-column>
        <el-table-column label="操作">
            <el-button type="primary">编辑</el-button>
                  <el-button type="danger">删除</el-button>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
          <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </pannle>
  </div>
</template>

<script>
import Pannle from "@/components/Pannle.vue";
import { goodsList } from "../../api/goods";
export default {
  data() {
    return {
      tableData: [],
      currentPage:1,
      pageSize:5,
      total:0
    };
  },
  components: {
    Pannle,
  },
  methods:{
      handleSizeChange(pageSize){
          this.pageSize=pageSize
          this.goodsData()
      },
      handleCurrentChange(page){
          this.currentPage=page
           this.goodsData()
      },
     async goodsData(){
         let data ={
             pageSize:this.pageSize,
             currentPage:this.currentPage
         }
          let res = await goodsList(data)
          this.total =res.data.total;
          this.tableData= res.data.data
      }
  },
   created() {
    //请求分类列表
    this.goodsData()
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 100%;
  height: 100%;
}
</style>